import {ColumnsType} from "antd/es/table";
import {Button, Popconfirm, Space} from "antd";
import {Link} from "react-router-dom";
import {ellipsisHandler, getTag} from "../util/ColumnsUtil";
import {ReimburseType} from "../type/ReimburseType";
import {fetchDeleteReimburse} from "../redux/reducer/async/reimburseAsyncAction";
import GlobalHandler from "../global/GlobalHandler";

const reimburseColumns: ColumnsType<ReimburseType> = [
    {
        dataIndex: 'index',
        title: '序号' ,
        width: 60,
        align: "center" ,
        render: (_, __, index) => {
            return <strong> {index + 1} </strong> ;
        }
    },
    {
        key: 'id',
        dataIndex: 'id' ,
        title: '数据编号',
        width: 110,
        align: "center" ,
        render: (value, record) => <Link to={"./details"} state={{reimburseId: record.id,totalAmount: record.totalAmount}}>{value}</Link>
    },
    {
        key: 'explain',
        dataIndex: 'explain' ,
        title: '说明',
        width: 110,
        align: "center" ,
    },
    {
        key: 'itemCount',
        dataIndex: 'itemCount' ,
        title: '条目',
        width: 100,
        align: "center" ,
    },
    {
        key: 'totalAmount',
        dataIndex: 'totalAmount' ,
        title: '总金额',
        width: 110,
        align: "center" ,
    },
    {
        key: 'status',
        dataIndex: 'status' ,
        title: '状态',
        width: 110,
        align: "center" ,
        ellipsis: {showTitle: false},
        render: (value) => getTag(value,"已结算","未报销")
    },
    {
        key: 'settleTime',
        dataIndex: 'settleTime' ,
        title: '结算时间',
        width: 110,
        align: "center" ,
        ellipsis: {showTitle: false},
        render: ellipsisHandler
    },
    {
        key: 'createDate',
        dataIndex: 'createDate' ,
        title: '创建日期',
        width: 110,
        align: "center" ,
    },
    {
        key: 'order',
        dataIndex: 'order' ,
        title: '数据排序',
        width: 100,
        align: "center" ,
    },
    {
        key: 'remark',
        dataIndex: 'remark' ,
        title: '备注信息',
        width: 110,
        ellipsis: {showTitle: false},
        render: ellipsisHandler
    },
    {
        title: '操作',
        dataIndex: 'option' ,
        align: "center",
        width: 100,
        render: (_, record) => {
            return <Space size={10}>
                <Link key={"user-update"} to={'./update'} state={record}> 更新 </Link>
                <Popconfirm title={"是否要确认删除?"} onConfirm={async () => {
                    let res = await GlobalHandler.getInstance().executeDispatchAsync(fetchDeleteReimburse(record.id));
                    if (res.data > 0){
                        GlobalHandler.getInstance().sendSuccessMessage("删除成功") ;
                    }else {
                        GlobalHandler.getInstance().sendWarningMessage("删除失败") ;
                    }
                }}>
                    <Button style={{padding: 0}} danger={true} key={"user-delete"} type={"link"}>删除</Button>
                </Popconfirm>
            </Space> ;
        }
    }

] ;
export default reimburseColumns ;

